[One Workflow][Bug] "Enabled" toggle remains active when workflow YAML has validation errors by rosomri · Pull Request #252698 · elastic/kibana

rosomri · 2026-02-11T11:55:46Z

Summary

Fixes a bug where the "Enabled" toggle and "Run" button in the workflow detail header remained active even when the workflow YAML had validation errors.

Problem

The toggle's disabled state was driven only by selectIsYamlSyntaxValid, which uses a lenient parser (WorkflowSchemaForAutocomplete). Strict validation errors — schema violations, duplicate step names, invalid liquid templates, missing connector IDs — were produced by Monaco inside WorkflowYAMLEditor but lived as local React state, inaccessible to the sibling WorkflowDetailHeader component.

Additionally, on page refresh, Monaco hasn't mounted yet so there was no validation signal at all — even workflows the server already flagged as invalid appeared toggleable.

Before:

Screen.Recording.2026-02-11.at.12.24.09.mov

After

Solution

Added hasValidationErrors: boolean to the Redux WorkflowDetailState
WorkflowYAMLEditor now syncs error-severity validation results to Redux via setHasValidationErrors
WorkflowDetailHeader computes a combined validity check:

const isValid = isSyntaxValid && !hasValidationErrors && workflow?.valid !== false;

This covers three layers:

isSyntaxValid — lenient YAML parse (catches broken syntax immediately)
hasValidationErrors — strict Monaco validation (catches schema errors after editor mounts)
workflow?.valid !== false — server-side validation (covers initial page load before Monaco mounts)

Changes

File	Change
`types.ts`	Added `hasValidationErrors` field to `WorkflowDetailState`
`slice.ts`	Added `setHasValidationErrors` reducer and initial value
`selectors.ts`	Added `selectHasValidationErrors` selector
`workflow_yaml_editor.tsx`	Syncs validation errors to Redux via `useEffect`
`workflow_detail_header.tsx`	Uses combined `isValid` for toggle, run button, and tooltips
`workflow_detail_header.test.tsx`	Unskipped broken test, added tests for validation errors and server-side `valid` flag

elasticmachine · 2026-02-15T10:54:34Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 5e469c5

Failed CI Steps

FTR Configs #96

Test Failures

[job] [logs] FTR Configs #96 / Synthetics API Tests PrivateLocationAPI "before all" hook for "adds a test legacy private location"

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`workflowsManagement`	1.5MB	1.5MB	+356.0B

semd

LGTM! Thanks @rosomri 🚀

I only have one small request

semd · 2026-02-18T19:02:49Z

  highlightedStepId: undefined,
  isTestModalOpen: false,
  loading: initialLoadingState,
+  hasValidationErrors: false,


This flag is managed downstream by the schema validation of the Monaco YAML editor. Which is fine, but could we be a bit more explicit with the name?

Suggested change

hasValidationErrors: false,

hasYamlSchemaValidationErrors: false,

…remains_active_when_validation_errors

kibanamachine · 2026-02-19T11:19:44Z

Starting backport for target branches: 9.3

https://github.com/elastic/kibana/actions/runs/22179623851

kibanamachine · 2026-02-19T11:27:35Z

💔 All backports failed

Status	Branch	Result
❌	9.3	Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 252698

Questions ?

Please refer to the Backport tool documentation

…L has validation errors (elastic#252698) ## Summary Fixes a bug where the "Enabled" toggle and "Run" button in the workflow detail header remained active even when the workflow YAML had validation errors. ### Problem The toggle's disabled state was driven only by `selectIsYamlSyntaxValid`, which uses a **lenient** parser (`WorkflowSchemaForAutocomplete`). Strict validation errors — schema violations, duplicate step names, invalid liquid templates, missing connector IDs — were produced by Monaco inside `WorkflowYAMLEditor` but lived as **local React state**, inaccessible to the sibling `WorkflowDetailHeader` component. Additionally, on page refresh, Monaco hasn't mounted yet so there was no validation signal at all — even workflows the server already flagged as invalid appeared toggleable. ## Before: https://github.com/user-attachments/assets/9054859c-49cc-4918-9bbc-1aa5bfafd47c ## After <img width="1913" height="843" alt="Screenshot 2026-02-11 at 13 52 55" src="https://github.com/user-attachments/assets/52f34996-3682-416b-8905-54ada8c23afd" /> ### Solution - Added `hasValidationErrors: boolean` to the Redux `WorkflowDetailState` - `WorkflowYAMLEditor` now syncs error-severity validation results to Redux via `setHasValidationErrors` - `WorkflowDetailHeader` computes a combined validity check: ``` const isValid = isSyntaxValid && !hasValidationErrors && workflow?.valid !== false; ``` This covers three layers: 1. **`isSyntaxValid`** — lenient YAML parse (catches broken syntax immediately) 2. **`hasValidationErrors`** — strict Monaco validation (catches schema errors after editor mounts) 3. **`workflow?.valid !== false`** — server-side validation (covers initial page load before Monaco mounts) ### Changes | File | Change | |------|--------| | `types.ts` | Added `hasValidationErrors` field to `WorkflowDetailState` | | `slice.ts` | Added `setHasValidationErrors` reducer and initial value | | `selectors.ts` | Added `selectHasValidationErrors` selector | | `workflow_yaml_editor.tsx` | Syncs validation errors to Redux via `useEffect` | | `workflow_detail_header.tsx` | Uses combined `isValid` for toggle, run button, and tooltips | | `workflow_detail_header.test.tsx` | Unskipped broken test, added tests for validation errors and server-side `valid` flag |

kibanamachine · 2026-02-20T11:49:38Z